.page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center
}

.header-box {
    position: relative;
    width: 100vw;
    height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--themeBgColor);

    .info {
        width: 700rpx;
        height: 13vh;
        background-color: #fff;
        border-radius: 20rpx;

        .top {
            position: relative;
            height: 13vh;
            display: flex;
            align-items: center;

            .image {
                width: 100rpx;
                height: 100rpx;
                margin-left: 30rpx;
            }

            .name {
                width: 500rpx;
                font-size: 40rpx;
                color: #6b6b6b;
                margin-left: 30rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: flex;
                flex-direction: column;

                .desc {
                    font-size: 28rpx;
                    color: #9c9c9c;
                    margin-top: 6rpx;
                }
            }


        }
    }
}

.content-box {
    position: relative;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--themeBgColor);
    overflow-y: scroll;

    .content {
        width: 700rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-top: 20rpx;

        .item {
            position: relative;
            font-size: 32rpx;
            padding: 20rpx 5rpx 20rpx 15rpx;
            border-bottom: 1rpx solid #f2f2f2;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &:last-child {
                border: none;
            }

            .bind-button {
                position: absolute;
                right: 0;
                background-color: transparent;
                width: 90%;
                height: 70rpx;

                &::after {
                    border: none;
                }
            }

            .left {
                font-weight: 500;
                color: #484C50;
                display: flex;
                align-items: center;

                .icon {
                    width: 80rpx;
                    height: 60rpx;
                    color: #a9a9a9;
                    font-size: 54rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .txt {
                        font-size: 48rpx;
                    }

                    .icon-smartweixin {
                        font-size: 56rpx;
                    }

                    .icon-smarttuandui {
                        font-size: 54rpx;
                    }

                    .icon-smartlingdang-xianxing,
                    .icon-smartzhongzhimima,
                    .icon-smartUIsheji_menjinxitong-20 {
                        font-size: 52rpx;
                    }
                }
            }

            .right {
                height: 70rpx;
                font-weight: 400;
                color: #000000;
                display: flex;
                align-items: center;

                .unbound {
                    color: #aca9a9;
                    font-size: 30rpx;
                }

                .image {
                    width: 64rpx;
                    height: 64rpx;
                    margin-top: 5rpx;
                }
            }
        }
    }

    .footer {
        .btn {
            width: 700rpx;
            height: 90rpx;
            font-size: 30rpx;
            color: #fff;
            margin-top: 50rpx;
            margin-bottom: 60px;
            border-radius: 20rpx;
        }
    }
}